<template>
  <div>
    <el-row :gutter="10">
      <el-col span="auto">
        <p class="notice">启事类型：</p>
      </el-col>
      <el-col span="auto">
        <el-radio-group v-model="postType" size="mini">
          <el-radio-button label="2">全部</el-radio-button>
          <el-radio-button label="0">寻物</el-radio-button>
          <el-radio-button label="1">认领</el-radio-button>
        </el-radio-group>
      </el-col>
      <div style="float: right">
        <el-col>
          <el-input v-model="keyword" placeholder="输入关键字搜索" prefix-icon="el-icon-search" @change="getPostList">
          </el-input>
        </el-col>
      </div>
    </el-row>
    <el-row>
      <p style="font-size: 17px; font-weight: bold;">物品分类：</p>
      <el-radio-group v-model="itemType" size="mini">
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button :label="item.id" v-for="item in itemTypeList">{{ item.type }}</el-radio-button>
      </el-radio-group>
    </el-row>
    <!-- 启事摘要列表 -->
    <el-empty description="这里什么也没有（；´д｀）ゞ" v-show="!postList.length"></el-empty>
    <PostAbstract v-for="item in postList" :post="item" :key="new Date().getTime()"></PostAbstract>
    <!-- 底部分页 -->
    <div style="text-align: center">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-sizes="[5, 10, 15]" :page-size="pageSize" :total="totalSize" background
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie"
import { getItemTypeList } from "@/api/post/itemType";
import { getPostListByMultipleCondition } from "@/api/search/post";
import PostAbstract from "@/components/post/PostAbstract.vue";

export default {
  components: { PostAbstract },
  data() {
    return {
      postType: 2,
      itemType: 0,
      itemTypeList: [],
      postList: [],
      currentPage: 1,
      pageSize: 5,
      totalSize: 0,
      keyword: ''
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getPostList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getPostList()
    },
    getItemTypeList() {
      getItemTypeList().then(res => {
        if (res.data.code === 200) {
          this.itemTypeList = res.data.itemTypeInfoList
        }
      })
    },
    getPostList() {
      let data = {
        completeStatus: 0,
        reviewStatus: 2,
        type: Number(this.postType) === 2 ? undefined : this.postType,
        itemTypeId: Number(this.itemType) === 0 ? undefined : this.itemType,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        sortByGmtCreate: 'desc'
      }
      if (this.keyword !== '') {
        this.$set(data, "keyword", this.keyword)
      }
      getPostListByMultipleCondition(data).then(res => {
        if (res.data.code === 200) {
          if (res.data.searchResult.dataList !== null) {
            this.postList = res.data.searchResult.dataList
            this.totalSize = res.data.searchResult.totalCount
          } else {
            this.postList = []
            this.totalSize = 0
          }
        }
      })
    }
  },
  created() {
    this.getItemTypeList()
    this.getPostList()
  },
  watch: {
    postType() {
      this.getPostList()
    },
    itemType() {
      this.getPostList()
    }
  }
}
</script>

<style scoped>
.notice {
  font-size: 17px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}
</style>
